<template>
    <div class="content">
        <el-dialog :title=title :visible.sync="dialogTableVisible" @open="open">
            <el-row>
                <el-col :span="24">
                    <div style="display: flex">
                        <el-button style="margin-bottom: 10px" type="primary" plain @click="addUser">添加人员</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table height="400px" :data="tableData" border>
                <el-table-column prop="name" label="姓名">
                    <template slot-scope="scope">
                        <strong v-if="scope.row.id == principleId" class="strong">部门负责人</strong>
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="sex_text" label="性别"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="roleNames" label="用户角色"></el-table-column>
                <el-table-column prop="organizationName" label="所属部门"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="210px">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.id != principleId" type="primary" plain style="margin-left: 10px"
                            size="mini" @click="assignPrinciple(scope.$index, scope.row)">指定为负责人
                        </el-button>
                        <el-button type="danger" plain style="margin-left: 10px" size="mini"
                            @click="deleteUser(scope.$index, scope.row)">移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <el-dialog width="30%" title="添加人员" :visible.sync="innerVisible" style="margin-top: 80px" append-to-body>
                <el-form :inline="true" :model="innerForm" :rules="rules" ref="innerForm">
                    <el-form-item label="请输入用户姓名" :label-width="formLabelWidth" prop="userName">
                        <el-autocomplete style="width: 100%;" v-model="innerForm.userName" :fetch-suggestions="querySearch"
                            placeholder="请输入用户姓名" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" plain @click="submitAddUser">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script>

import { systemApi, commonApi } from "../../api/api";
import { validator } from "../../utils/validator";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    mixins: [
        tables,form
    ],
    data() {
        return {
            tableData: [],
            dialogTableVisible: false,
            innerVisible: false,
            formLabelWidth: '130px',
            principleId: null,
            organizationName: null,
            total: 0,
            search: {
                organizationId: null,
                size: 10,
                current: 1
            },
            innerForm: {
                userName: null,
                userId: null
            },
            rules: {
                userName: { required: true, validator: validator.principleName, trigger: 'blur' }
            }
        };
    },
    computed: {
        title() {
            return this.organizationName ? this.organizationName + "人员管理" : "人员管理"
        }
    },
    methods: {
        setData(key, value) {
            this[key] = value
            return this
        },
        onSubmit() {
            commonApi.page('user', this.search).then(res => {
                this.loadPage(res, ['sex']);
            })
        },
        open() {
            this.onSubmit();
        },
        deleteUser(index, row) {
            systemApi.removeUserFormOrganization({ id: row.id }).then(res => {
                this.$message({ message: res.data.msg, type: 'success' })
                this.tableData.splice(index, 1);
                this.total = this.total - 1;
            },
                commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        assignPrinciple(index, row) {
            systemApi.assignPrinciple({ id: this.search.organizationId, principleId: row.id }).then(res => {
                this.$message({ message: res.data.msg, type: 'success' })
                this.principleId = row.id;
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        addUser() {
            this.innerVisible = true
        },
        submitAddUser() {
            this.$refs["innerForm"].validate((valid) => {
                if (valid) {
                    let data = {
                        organizationId: this.search.organizationId,
                        name: this.innerForm.userName,
                    }
                    systemApi.addUserToOrganization(data).then(res => {
                        this.$message({ message: res.data.msg, type: 'success' })
                        this.innerForm.userId = null;
                        this.innerForm.userName = null;
                        this.innerVisible = false;
                        this.onSubmit()
                    }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
                }
            }
            )
        },
        querySearch(name, cb) {
            systemApi.queryUser({ name }).then(res => {
                cb(res.data.data)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        }
        ,
        handleSelect(item) {
            this.innerForm.userId = item.id;
            this.innerForm.userName = item.value;
        }
        ,
    }


}
    ;

</script>


<style lang="scss" scoped>
.content {

    .el-dialog {
        height: 80%;
    }

    .block {
        display: flex;
        margin: 20px;
        justify-content: right;
    }

    .strong {
        position: absolute;
        left: 1px;
        top: 5px;
        font-weight: bold;
        color: red;
    }

}
</style>